<template>
    <router-link :to="toRouter">
        <div class="item btnFocus">
            <img :src="img" alt="">
            <p>{{ content }}</p>
        </div>
    </router-link>
</template>

<script>
export default {
    name: "ListButton",
    props: {
        img: {
            type: String,
            required: true
        },
        content: {
            type: String,
            required: true
        },
        toRouter: {
            type: String,
            required: true
        }
    },
}
</script>

<style scoped>
a {
    color: black;
    font-size: 1.1rem;
    display: inline-block;
    width: 100%;
}

.item {
    width: 100%;
    height: 72px;
    margin: 5px 0;
    padding-left:  15px;
    padding-right:  15px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    box-shadow: var(--grayColor) 0 0 5px;
    border: var(--grayColor) solid 1px;
}
.item img {
    width: 40px;
    margin-right: 20px;
}
</style>